/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, useTheme,} from "customize-easy-ui-component";
import { ReportViewProps, } from "../../common/base";
import {
    末尾链接, 落款单位地址,
} from "../../common/rarelyVary";
import {检验结论报告,} from "./repView";
import {useSubRepMain} from "../../hook/useSubRepMain";
import {useRepMenuDirItems} from "../../hook/useMainRepUrlOr";
import {
    ReportFirstPageHeadAllNmbbm,
} from "../../industrial/rarelyVary";
import {useItemsMapPressure} from "../../common/pressure";
import {Projects默认} from "./Regular.O-1";
import {Link as RouterLink} from "../../../routing/Link";
import {注意事项VsNj, 首页设备概况VsNj} from "../rarelyVary";
import {AttachInspectItemsVw} from "./viewItem";
import {AttachedFigureVw} from "../viewAnp";

export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    const theme= useTheme();
    const [mapFxian]=useItemsMapPressure({ projects:orc.Projects });
    const [rootMenu]=useRepMenuDirItems(Projects默认, orc.Projects, `/reportView/${rep?.modeltype}/ver/${verId}/${repId}`);
  return (
      <React.Fragment>
          {rootMenu}
          <div css={{
              "@media not print": {
                  marginTop: '1rem',
                  marginBottom: '1rem'
              }
          }}>
              <div css={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  "@media print": {
                      height: '100vh',       //一张纸的高度！同时配合 pageBreakAfter: 'always', 来约束特定纸张大小；
                      pageBreakInside: 'avoid',
                  }
              }}>
                  {ReportFirstPageHeadAllNmbbm({theme, rep, mbbm: 'FJB/TM-1007-1-0-2022'})}
                  <div>
                      <Text variant="h3" css={{textAlign: 'center', "@media (min-width:690px),print and (min-width:538px)": {fontSize: theme.fontSizes[6],}}}>
                        压力容器年度检查报告
                      </Text>
                      <br css={{"@media not print": {display: 'none'}}}/>
                      <Text variant="h5" css={{textAlign: 'center',}}> （ FJB/DC-1040-0-2018 ）</Text>
                  </div>
                  <div>
                      {首页设备概况VsNj({theme, orc, rep})}
                  </div>
                  <div css={{
                      textAlign: 'center',
                      "@media print": {
                          pageBreakInside: 'avoid'
                      }
                  }}>
                      {落款单位地址}
                  </div>
              </div>

              {注意事项VsNj({
                  rep,
                  comply: '书为依据《固定式压力容器安全技术监察规程》（TSG 21-2016）、 《特种设备使用管理规则》（ TSG08-2017）制定，适用于固定式压力容器进行年度检查的 报告，检验结论仅代表该设备在检验时的安全状况'
              })}

              {检验结论报告({theme, orc, rep})}

              <AttachInspectItemsVw orc={orc} rep={rep}/>

              {mapFxian.get('年度检查报告（附图）')?.do &&
                  <AttachedFigureVw orc={orc} rep={rep} title={'压力容器年度检查报告（附页图）'} mendtCB={mendtCB附录}/>
              }
          </div>
          <div>
              <RouterLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
                  <Text variant="h4" css={{"@media print": {display: 'none'}}}>附加的报告附页-项目表</Text>
              </RouterLink>
          </div>
          {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
      </React.Fragment>
  );
}

const mendtCB附录= (orc: any, rep: any) => {
    return [<Text>都李会，第二着</Text>, '2004-11-21', <Text>它导航</Text>,'2024-11-12'];
}

